<template>
  <a-table
    class="table"
    :loading="loading"
    :scroll="{ x: 1000 }"
    :row-key="record => record.id"
    :columns="columns"
    :data-source="dataSource"
    :pagination="ipagination"
    @change="handleTableChange"
  />
</template>

<script>
export default {
  name: 'MyTable',
  props: {
    fetch: {
      type: Function,
      require: true
    },
    columns: {
      type: Array,
      require: true
    },
    pagination: {}
  },
  data() {
    return {
      loading: true,
      dataSource: [],
      param: {},
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      }
    }
  },
  created() {
    this.loadData()
    this.ipagination = { ...this.ipagination, ...this.pagination }
  },
  methods: {
    // 加载数据
    loadData() {
      this.loading = true
      this.fetch(this.param)
        .then(res => {
          console.log(res, 'res')
          this.dataSource = res.result.records
          this.ipagination.total = res.result.total
        })
        .finally(() => {
          this.loading = false
        })
    },

    // table改变
    handleTableChange(page, filters, sorter) {
      this.param.order = sorter.order
      this.ipagination = page
      this.loadData()
    }
  }
}
</script>

<style lang="less" scoped></style>

